<template>
  <div class="page-banner-list">

    <div class="page-banner-list__header">
        <el-button @click="handleDelSelect" type="danger"
        :disabled="SelectIds.length==0"
        >
            删除选中
        </el-button>
        <el-button @click="$router.push('/banner/add')" type="primary">
            新增轮播图
        </el-button>
        <el-button @click="fetchData">
            <el-icon><Refresh /></el-icon>
        </el-button>
    </div>


    <el-table :data="dispalyTableData" @selection-change="onSelectionChange">
      <!-- <el-table-column type="index" label="序号"  /> -->
      <!-- type设置为selection改为多选框 -->
      <el-table-column type="selection" label="序号"  />
      <el-table-column  label="图片" >
        <!-- 设置默认插槽
        提供作用域插槽
    作用域插槽中有row这个数据，row就是当前行的数据对象 -->
        <template #default="scope" >
            <img :src="scope.row.img" style="height:100px"/>
        </template>
      </el-table-column>
      <el-table-column prop="alt" label="描述"  />
      <el-table-column prop="link" label="链接" />
      <el-table-column  label="操作" >

        <template #default="scope">
            <el-popconfirm title="你确定要删除吗？" @confirm="handleDel(scope.row.id)">
                <template #reference>
                    <el-button type="danger" >删除</el-button>
                </template>
            </el-popconfirm>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty description="description" />
      </template>

    </el-table>
    <div class="page-banner-list__footer">
    <!-- 分页 -->
    <el-pagination
    v-if="tableData.length>0"
     background layout="prev, pager, next" 
     :total="tableData.length"
    v-model:current-page="page"
    :page-size="pageSize"/>
    </div>
  </div>
</template>

<script>
import axios from "axios"
//引入api方法
import {getBannerData,getBannerData2,delBanner,delBanner2} from "@/api/banner.js"
export default{

    name:"banner-list",
    data(){
        return {
            tableData :[],//
            //当前页数
            page:1,
            pageSize:5,
            SelectIds:[]
        }
    },
    computed:{
        dispalyTableData(){
            return this.tableData.slice((this.page-1)*5,this.page*5)
        }
    },
    methods:{
        //请求数据
        fetchData(){
            getBannerData().then((data)=>{
                console.log(data);
                //将data.data赋值
                this.tableData=data.data
            })
            /* axios.get("http://localhost:3000/banners")
            .then((response)=>{
                const data=response.data
                this.tableData=data
            }) */
        },
        handleDel(id){
            console.log(id);
            // axios.delete(`http://localhost:3000/banners/${id}`,)
            // .then((response)=>{
            //     //console.log(response);//返回的是空数组，已删除
            //     /* const data=response.data
            //     this.tableData=data */
            //     this.fetchData()
            // }).catch((err)=>{
            //     console.log(err);
            // })
            delBanner(id).then((response)=>{
                this.fetchData()
            }).catch((err)=>{
                 console.log(err);
             })


        },
        /* handleDel(id){
            delBanner2(id).then((response)=>{
                console.log(response);
            })
        }, */


        handleDelSelect(){
            //获取到选中的数据
            //使用this.SelectIds给后端发请求
        },
        onSelectionChange(a){
            //勾选或取消勾选的回调，a是一个数组，每一项是勾选的数据对象
            //console.log(a);
            this.SelectIds=a.map((item)=>{
                return item.id
            })
            //console.log(this.SelectIds);
        }
    },
    mounted(){
        this.fetchData()
    }
}
</script>


<style lang="scss">
.page-banner-list{
    height: 100%;
    display: flex;
    flex-direction: column;
    &__footer,&__header{
        display: flex;
        justify-content: flex-end;
        padding: 10px 0;
    }
    
}

.el-table{
    flex: 1;
}
</style>